import styled from 'styled-components';
import React, {useState} from 'react';

const Wrapper = styled.section`
  font-size: 24px;

  > ul {
    display: flex;
    background-color: #F5F5F5;
      
    > li {
      width: 50%;
      text-align: center;
      padding: 16px 0;
      position: relative;
      font-weight: 600;
     
      &.selected {
        color: ${props => props.theme.main};
        background-color: #fff;

        ::after {
          content: '';
          display: block;
          height: 5px;
          width: 2rem;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          background-color: ${props => props.theme.main};
        }
      }
       @media screen and (max-height: 570px){
        &{
          padding: 10px 0;
          font-size: 20px;
        }
        &.selected {
          ::after {
            height:3px;
          }
        }
      }
    }
  }
`;
type Props = {
  value: '-' | '+',
  onChange: (value: '-' | '+') => void
}
const CategorySection: React.FC<Props> = (props) => {
  const categoryMap = {'-': '支出', '+': '收入'};
  type Keys = keyof typeof categoryMap
  const [categoryList] = useState<Keys[]>(['-', '+']);
  const category = props.value;
  return (
    <Wrapper>
      <ul>
        {categoryList.map(c =>
          <li className={category === c ? 'selected' : ''}
              onClick={() => props.onChange(c)} key={c}>{categoryMap[c]}
          </li>
        )}
      </ul>
    </Wrapper>
  );
};
export {CategorySection};
